<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow">
      <Form
        :model="formItem"
        :label-width="100"
        style="display:flex;flex-direction:row;align-items:flex-end;flex-flow:wrap;height:85px;"
        class="searchForm"
      >
        <FormItem label="套餐名称/ID">
          <Input v-model="formItem.menuKeyword" placeholder="套餐名称/ID" style="width:150px"></Input>
        </FormItem>
        <FormItem label="套餐销售状态">
          <Select v-model="formItem.menuStatus" style="width:150px">
            <Option value="-1">全部</Option>
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
        </FormItem>
        <FormItem label style="margin-left:-80px; width:520px;">
          <Row>
            <Col span="4" style="text-align:center">创建时间</Col>
            <Col span="9">
              <DatePicker type="datetime" placeholder="请选择开始时间" v-model="formItem.searchDataBegin"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">—</Col>
            <Col span="9">
              <DatePicker type="datetime" placeholder="请选择结束时间" v-model="formItem.searchDataFinish"></DatePicker>
            </Col>
          </Row>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>

    <TableList
      :columns="columns"
      :data="resultList"
      :page="page"
      :total="pageTotal*pageNum"
      :pageNum="pageNum"
      :tableTitle="tableTitle"
      newOne="新建套餐"
      @newOneFn="openMenuEditPage"
      @changePage="changePage"
    >
      <span>（共条{{resultCount}}个套餐）</span>
    </TableList>
  </div>
</template>
<style>
</style>
<script>
import { menuList, menuStatus, menuDelete } from "api/recuit/companyMenu.js";
import { shuffle, dateToTimestamp, objectDeepCopy } from "@/common/js/util.js";
import TableList from "@/components/consumer/tableList";
import Config from '@/config'

export default {
  name: "menuList",
  data () {
    return {
      formItem: {
        menuKeyword: "",//搜索 商家名称/ID
        menuStatus: "",//搜索 电话
        searchDataBegin: "",//搜索 开始时间
        searchDataFinish: ""//搜索 结束时间
      },
      page: 1,//第几页
      pageNum: 10, //显示条数
      pageTotal: 0, //总条数
      resultList: [],//充值流水数据
      resultCount: 0,//充值流水总条数
      tableTitle: '套餐列表',
      columns: [
        {
          title: "ID",
          key: "menu_config_id",
          maxWidth: 60
          // width: 100
        },
        {
          title: "套餐名称",
          key: "menu_name",
          minWidth: 20,
          // width: 150
        },
        {
          title: "套餐内容",
          key: "publish_job_times",
          // width: 170,
          minWidth: 80,
          render: (h, params) => {
            let list = [];
            if (params.row.publish_job_times != 0) {
              list.push(
                h('div', {
                  style: {
                    marginRight: '5px'
                  }
                }, '发布职位 ' + (params.row.publish_job_times) + ' 次')
              )
            }

            if (params.row.refresh_job_times != 0) {
              list.push(
                h('div', {
                  style: {
                    marginRight: '5px',
                    marginTop: '1px'
                  }
                }, '刷新职位 ' + (params.row.refresh_job_times) + ' 次')
              )
            }

            if (params.row.free_resume_times != 0) {
              list.push(
                h('div', {
                  style: {
                    marginRight: '5px',
                    marginTop: '1px'
                  }
                }, '免费查看简历 ' + (params.row.free_resume_times) + ' 次')
              )
            }

            return h(
              "span",
              {
                style: {}
              },
              list
              // [
              //   h('div', {
              //     style: {
              //       marginRight: '5px'
              //     }
              //   }, '发布职位 ' + (params.row.publish_job_times) + ' 次'),
              //   h('div', {
              //     style: {
              //       marginRight: '5px',
              //       marginTop: '1px'
              //     }
              //   }, '刷新职位 ' + (params.row.refresh_job_times) + ' 次'),
              //   h('div', {
              //     style: {
              //       marginRight: '5px',
              //       marginTop: '1px'
              //     }
              //   }, '免费查看简历 ' + (params.row.free_resume_times) + ' 次')
              // ]
            );
          }
        },
        {
          title: "套餐价格",
          key: "menu_price",
          minWidth: 10,
          // width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              params.row.menu_price + '元'
            );
          }
        },
        {
          title: "销售数量",
          key: "company_menu_num",
          // width: 150
        },
        {
          title: "是否开启",
          key: "menu_status",
          maxWidth: 85,
          // width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                }
              },
              [
                h('Button', {
                  props: {
                    type: (params.row.menu_status) ? 'primary' : 'error',
                    size: 'small'
                  },
                  style: {
                    // marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.changeMenuStatus({
                        menu_config_id: params.row.menu_config_id, menu_status: (params.row.menu_status == true) ? 0 : 1
                      })
                    }
                  }
                }, (params.row.menu_status) ? '开启' : '关闭')
              ]
            );
          }
        },
        {
          title: "排序",
          key: "menu_sort",
          maxWidth: 70
          // width: 80
        },
        {
          title: "创建时间",
          key: "time_create",
          // width: 150
        },
        {
          title: "操作",
          key: "action",
          minWidth: 60,
          // width: 180,
          align: "center",
          render: (h, params) => {
            return h("span", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "middle"
                  },
                  style: {
                    margin: "0 1px"
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: "editCompanyMenu",
                        params: { companyMenuId: params.row.menu_config_id }
                      });
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "middle"
                  },
                  style: {
                    margin: "0 1px"
                  },
                  on: {
                    click: () => {
                      this.changeMenuDelete({
                        menu_config_id: params.row.menu_config_id
                      })
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],

    }
  },
  mounted () {
    this.getData()
  },
  components: {
    TableList
  },
  methods: {
    //搜索数据
    searchData () {
      this.page = 1;
      this.getData();
    },
    //切换页数
    changePage (pageInfo) {
      this.page = pageInfo.page;
      this.getData();
    },
    openMenuEditPage () {
      this.$router.push({ name: 'editCompanyMenu' })
    },
    async getData () {
      //重置参数，防止订单导出后再进行搜索引发的问题
      this.pageNum = 10; //
      // console.log(this.pageNum)
      let paramList = new Object();

      //获取页数
      paramList.page = this.page;
      paramList.pageNum = this.pageNum;
      // console.log(paramList)
      // console.log(this.formItem)

      //获取form对象查询条件
      for (let i in this.formItem) {
        if (this.formItem[i] && (i == 'searchDataBegin' || i == 'searchDataFinish')) {
          paramList[i] = dateToTimestamp(this.formItem[i] / 1000);
        } else {
          paramList[i] = this.formItem[i];
        }
      }

      // console.log(paramList)
      let apiResult = await menuList(paramList).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      this.resultList = apiResult.menuList
      this.resultCount = apiResult.menuSum
      this.pageTotal = apiResult.page.pageTotal

      // console.log(this.resultList)
      // console.log(this.resultCount)
      // console.log(this.pageTotal)
    },
    //更改套餐状态
    changeMenuStatus (changeData) {
      menuStatus(changeData).then(res => {
        console.log(res)
        this.$Message.success("操作成功")
        this.getData()
      });
    },
    //删除套餐
    changeMenuDelete (deleteData) {
      menuDelete(deleteData).then(res => {
        console.log(res)
        this.$Message.success("删除成功")
        this.getData()
      });
    }
  }
}
</script>
<style scoped lang="less">
/*搜索*/
.search {
  //   padding: 18px;
  box-sizing: border-box;
  background: #fff;
  //   margin-bottom: 24px;
}
</style>